<template>
  <view class="like-container" @click="changeStatus">
    <view
      class="like-icon"
      :style="{ width: size + 'rpx', height: size + 'rpx', marginBottom: getIsIos ? '8rpx' : 0 }"
    >
      <view
        class="ali-icon icon"
        :style="{ fontSize: size + 'rpx', color: defaultColor }"
        :class="[!isLike && 'have-like']"
      >
        {{ notIcon }}
      </view>
      <view
        class="ali-icon icon ac-icon"
        :style="{ fontSize: size + 'rpx', color: acColor }"
        :class="[isLike && 'have-like']"
      >
        {{ icon }}
      </view>
    </view>
    <view
      v-if="showLikeText"
      class="like-text"
      :style="{ color: isLike ? acColor : defaultColor, fontSize: size + 'rpx' }"
    >
      {{ likeText }}
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { behaviorLikeStatus, setBehaviorLike } from '@/api';
  import type { BehaviorLikeStatusData } from '@/api/indexTypes';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { isIos, isLogin } from '@/utils/is';
  import { propTypes } from '@/utils/propTypes';
  import { onPullDownRefresh } from '@dcloudio/uni-app';
  import { ref, computed, type PropType, onUnmounted, watch, unref } from 'vue';
  import { storeToRefs } from 'pinia';

  const props = defineProps({
    size: propTypes.number.def(60),
    notIcon: propTypes.string.def('\uec7f'),
    icon: propTypes.string.def('\uec8c'),
    defaultColor: propTypes.string.def('#666'),
    acColor: propTypes.string.def('#4974FF'),
    showLikeText: propTypes.bool.def(true),
    likeText: propTypes.string.def('点赞'),
    param: {
      type: Object as PropType<BehaviorLikeStatusData>,
      required: true,
    },
  });

  const isLike = ref(false);

  const useUser = useUserStoreWithOut();
  const { userInfo } = storeToRefs(useUser);
  const { system } = uni.getDeviceInfo();

  function getLikeStatus() {
    if(unref(userInfo).phonenumber && props.param){
      behaviorLikeStatus(props.param).then((r) => (isLike.value = r));
    }
  };
  getLikeStatus();

  watch(
    () => unref(userInfo).phonenumber,
    (val) => {
      getLikeStatus();
    }
  );

  const changeStatus = function () {
    isLogin(()=>{
      isLike.value = !isLike.value;
    })
  };

  function setLike() {
    unref(userInfo).phonenumber && setBehaviorLike({ ...props.param, status: isLike.value ? 1 : 0 });
  }

  onUnmounted(() => {
    setLike();
  });

  onPullDownRefresh(() => {
    setLike();
  });

  const getIsIos = computed(() => isIos(system));
</script>

<style lang="scss" scoped>
  .like-container {
    display: flex;
    align-items: center;

    .like-icon {
      position: relative;
      margin-right: 10rpx;

      .icon {
        transform: scale(0);
      }

      .ac-icon {
        position: absolute;
        left: 0;
        top: 0;
      }
    }

    .have-like {
      animation: like 0.2s ease-out forwards;
    }

    @keyframes like {
      0% {
        transform: scale(0.2);
      }

      10% {
        transform: scale(0.4);
      }

      20% {
        transform: scale(0.6);
      }

      30% {
        transform: scale(0.8);
      }

      40% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.2);
      }

      60% {
        transform: scale(1.4);
      }

      70% {
        transform: scale(1.6);
      }

      80% {
        transform: scale(1.4);
      }

      90% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }
  }
</style>
